<template>
    <!-- 定位 -->
    <div class="position">
        <span class="iconfont position_icon">&#xe619;</span>
        <span class="position_name">北京理工大学国防科技园2号楼10层</span>
        <span class="iconfont position_notice">&#xe7e5;</span>
    </div>
    <!-- 搜索 -->
    <div class="search">
        <span class="iconfont">&#xe632;</span>
        <span class="search_text">山姆会员商店优惠商品</span>
    </div>
    <!-- banner -->
    <div class="banner">
        <img src="http://www.dell-lee.com/imgs/vue3/banner.jpg" alt="" class="banner_img">
    </div>
    <!-- 图标列表 -->
    <div class="icon_list">
        <div class="icon_item" v-for="item in list">
            <img class="icon_item_img" :src="item.imgName" alt="">
            <p class="icon_item_desc">{{ item.desc }}</p>
        </div>
    </div>
    <!-- 分割线 -->
    <div class="gap"></div>
</template>

<script setup>
//数据
import { ref} from 'vue';
const list = ref([])
const iconList = [
    {
        "imgName": "http://www.dell-lee.com/imgs/vue3/超市.png",
        "desc": "超市便利"
    },
    {
        "imgName": "http://www.dell-lee.com/imgs/vue3/菜市场.png",
        "desc": "菜市场"
    },
    {
        "imgName": "http://www.dell-lee.com/imgs/vue3/水果店.png",
        "desc": "水果店"
    },
    {
        "imgName": "http://www.dell-lee.com/imgs/vue3/鲜花.png",
        "desc": "鲜花绿植"
    },
    {
        "imgName": "http://www.dell-lee.com/imgs/vue3/医药健康.png",
        "desc": "医药健康"
    },
    {
        "imgName": "http://www.dell-lee.com/imgs/vue3/家居.png",
        "desc": "家居时尚"
    },
    {
        "imgName": "http://www.dell-lee.com/imgs/vue3/蛋糕.png",
        "desc": "烘培蛋糕"
    },
    {
        "imgName": "http://www.dell-lee.com/imgs/vue3/签到.png",
        "desc": "签到"
    },
    {
        "imgName": "http://www.dell-lee.com/imgs/vue3/大牌免运.png",
        "desc": "大牌免运"
    },
    {
        "imgName": "http://www.dell-lee.com/imgs/vue3/红包.png",
        "desc": "红包套餐"
    }
]
   list.value = iconList
   console.log(list.value);
</script>

<style lang="scss" scoped>
@import '../style/mixins.scss';
@import '../style/viriables.scss';

//定位
.position {
    position: relative;
    display: flex;
    align-items: center;
    line-height: .22rem;
    font-size: .16rem;
    padding: .16rem .24rem .16rem 0;

    .position_icon {
        font-size: .2rem;
    }

    &_name {
        @include ellipse;
        margin-left: .08rem;
        color: $content-fontcolor;
    }

    .position_notice {
        position: absolute;
        right: 0;
        font-size: .2rem;
    }
}

//搜索
.search {
    margin-bottom: .16rem;
    padding-left: .16rem;
    line-height: .32rem;
    background-color: #F5F5F5;
    border-radius: .16rem;

    &_text {
        margin-left: .12rem;
        font-size: .14rem;
        font-family: PingFangSC-Regular;
        color: #B7B7B7;
    }
}

//banner
.banner {
    &_img {
        width: 100%;
    }
}

//图标列表
.icon_list {
    display: flex;
    flex-wrap: wrap;
    margin-top: .16rem;

    .icon_item {
        width: 20%;
        display: flex;
        flex-direction: column;
        align-items: center;

        &_img {
            width: .4rem;
            height: .4rem;
        }

        &_desc {
            margin: .06rem 0 .16rem 0;
        }
    }
}

//分割线
.gap {
    height: .1rem;
    background-color: #F1F1F1;
    margin: 0 -0.18rem;
}
</style>